<template>
  <div class="home">
    <splitpanes :dbl-click-splitter="false" class="default-theme">
      <pane min-size="20">
        <div class="left">
          <div class="header">
            <i class="el-icon-document"></i>
            题目描述
          </div>
          <div class="left-con">
            <img src="@/assets/imgs/冒泡排序.gif" alt="" />
            <mdRender :content="mdData"></mdRender>
          </div>
          <div style="margin: 0 10px 10px 10px">
            <h3 style="margin-bottom: 10px">其他解题思路</h3>
            <el-collapse accordion>
              <el-collapse-item title="选择排序">
                <img
                  style="width: 100%"
                  src="@/assets/imgs/选择排序.gif"
                  alt=""
                />
              </el-collapse-item>
              <el-collapse-item title="插入排序">
                <img
                  style="width: 100%"
                  src="@/assets/imgs/插入排序.gif"
                  alt=""
                />
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </pane>
      <pane min-size="20">
        <splitpanes horizontal>
          <pane size="80">
            <div class="right">
              <div class="right-con">
                <div class="header">
                  <i class="iconfont icon-code"></i>
                  代码
                  <div style="margin-left: 10px" class="run">
                    <el-button
                      @click="runClick"
                      size="mini"
                      icon="el-icon-video-play"
                      type="primary"
                      >运行</el-button
                    >
                  </div>
                </div>
                <div class="code-sel">
                  <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                      {{ lang
                      }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        :command="item"
                        v-for="item in langs"
                        :key="item"
                        >{{ item }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <codeEditor ref="codeEditorRef"></codeEditor>
              </div></div
          ></pane>
          <pane size="20">
            <div class="result">
              <div class="header">
                <i class="el-icon-s-platform"></i>
                运行结果
              </div>
              <div class="result-con">
                <div class="result-success" v-if="runStatus === 'success'">
                  <el-alert :closable="false" :title="resultVal" type="success">
                  </el-alert>
                </div>
                <div class="result-error" v-if="runStatus === 'error'">
                  <h3 class="error-title">执行出错</h3>
                  <el-alert :closable="false" :title="resultVal" type="error">
                  </el-alert>
                </div>
              </div>
            </div>
          </pane>
        </splitpanes>
      </pane>
    </splitpanes>
  </div>
</template>
<script>
import mdRender from "@/components/mdRender";
import codeEditor from "@/components/editor";
import { mdData } from "@/model/md.js";
import { Message } from "element-ui";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";

export default {
  name: "home",
  props: {},
  components: { mdRender, codeEditor, Splitpanes, Pane },
  computed: {},
  data() {
    return {
      mdData: mdData.con,
      langs: [
        "JavaScript",
        "Python",
        "Python3",
        "Java",
        "C",
        "C++",
        "PHP",
        "Swift",
        "Kotlin",
        "Rust",
      ],
      lang: "JavaScript",
      runStatus: "",
      resultVal: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleCommand(command) {
      console.log(command);
      if (command !== "JavaScript") {
        Message.warning("正在支持中...");
        return;
      }
      this.lang = command;
    },
    runClick() {
      let codeCon = this.$refs.codeEditorRef.getCodeContext();
      try {
        const result = eval(codeCon); // 注意：eval 是危险的，仅用于信任的代码或教育目的。
        console.log(result); // 打印结果到控制台。
        this.runStatus = "success";
        try {
          this.resultVal = `结果：${JSON.stringify(result)}`;
        } catch (error) {
          this.resultVal = `结果：${result}`;
        }
      } catch (error) {
        console.error(error); // 打印错误信息到控制台。
        this.runStatus = "error";
        this.resultVal = error;
      }
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.splitpanes__pane {
  overflow: auto;
}
::v-deep .splitpanes.default-theme .splitpanes__splitter {
  background: none;
  &:hover {
    background: rgb(64, 158, 255);
  }
}
::v-deep .el-alert__title {
  font-size: 15px;
}
.home {
  display: flex;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .left {
    // width: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: auto;
    .left-con {
      padding: 15px;
      img {
        width: 100%;
      }
    }
  }
  .right {
    // width: 55%;
    height: 100%;
    .right-con {
      //   margin-left: 10px;
      background: #fff;
      height: 100%;
      border-radius: 6px;
      border: 1px solid #ddd;
    }
    .code-sel {
      padding: 10px;
      border-bottom: 1px solid #0000000f;
    }
  }
}
.result {
  height: 100%;
  background: #fff;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 6px;
  overflow: auto;
  .result-con {
    padding: 10px;
  }
  .error-title {
    color: #f56c6c;
    padding-bottom: 10px;
  }
}
.header {
  height: 40px;
  background: #fafafa;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border-radius: 6px 6px 0 0;
  i {
    font-size: 18px;
    margin-right: 5px;
    color: rgb(64, 158, 255);
  }
}
</style>
